﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Trilha Imóvel - Ver imóveis
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

            <div data-role="page" id="Map">
                
                <div id="Main" data-role="content">

                    <fieldset class="ui-grid-a">
	                    <div class="ui-block-a">
                            <a id="lnkShowFilter" 
                                href="#Filters" 
                                data-role="button"
                                data-theme="b"
                                title="Clique para exibir os filtros">
                                Filtros
                            </a>
                        </div>
	                    <div class="ui-block-b">
                            <a id="lnkDisplayEstateList" 
                                href="#" 
                                data-role="button"
                                data-theme="b"
                                title="Clique para exibir a listagem de imóveis">
                                Exibir Lista
                            </a>
                        </div>	   
                    </fieldset>

                    <div id="mapContainer">
                    </div>

                    <input type="hidden" id="initialPoint_Lat" value="<%= ViewData["InitialPointLat"] %>" />
                    <input type="hidden" id="initialPoint_Lng" value="<%= ViewData["InitialPointLng"] %>" />

                    <br /><br />

                    <div data-role="collapsible" data-theme="b">
		                <h3 data-theme="b">Imóveis</h3>
		                <ul id="estateListView"
                            data-role="listview" data-inset="true" data-theme="b" data-dividertheme="a"> 
		                </ul> 
                    </div> 
                </div>

            </div>

            <div data-role="page" id="Filters" data-theme="b"> 
 
	            <div data-role="header"> 
		            <h1>Filtros</h1> 
	            </div>
 
	            <div data-role="content">	
		            <div data-role="fieldcontain">
	                    <label for="slider">Distância (m):</label>
 	                    <input type="range" name="sldDistanceKm" id="sldDistanceKm" 
                            value="<%= ViewData["DistanceInMeters"] %>" 
                            min="<%= ViewData["FilterDistanceMinInMeters"] %>" max="<%= ViewData["FilterDistanceMaxInMeters"] %>"  />
                    </div>	
                    <br /><br />
                    <a id="applyFilter" 
                        href="#" 
                        data-role="button"
                        data-theme="b"
                        title="Clique para aplicar os filtros">
                        Filtrar
                    </a>
	            </div>
            </div>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="AditionalJavascript" runat="server">

<script type="text/javascript">

    (function (appLib, cfg) {

        $(document).ready(function () {

            var latitude = Number($('#' + cfg.HIDDEN_LAT_ID).val());
            var longitude = Number($('#' + cfg.HIDDEN_LNG_ID).val());

            $(window).bind(appLib.RENT_POINTS_ADDED_EVENT, function (event) {
                //alert('Rent points added.');
                //appLib.addInterestingPoints();
            });

            $(window).bind(appLib.INTERESTING_POINTS_ADDED_EVENT, function (event) {
                alert('Interesting points added.');
            });

            $("#applyFilter").click(function (e) {
                var distanceFilter = appLib.getFilterDistanceInMeters();
                appLib.addRentPoints(distanceFilter);

                $.mobile.changePage("#Map");

                e.preventDefault();
            });

            $("#lnkDisplayEstateList").click(function (e) {

                var Y_Point = $("#estateListView").offset().top;
                $.mobile.silentScroll(Y_Point);

                e.preventDefault();
            });

            var distanceFilter = appLib.getFilterDistanceInMeters();

            appLib.initializeMap();
            appLib.addInitialPointToMap(latitude, longitude);
            appLib.addRentPoints(distanceFilter);
        });
    })(trilhaImovel.maps, trilhaImovel.config);

    function bindDetail(e, item) {

        $("#hddId").val(item.Id);
        $("#lblEstateName").html(item.Name);
        $("#lblOperationAndPropertyType").html(item.OperationType + " - " + item.PropertyType);
        $("#lblPriceOrRentValue").html("R$ " + item.PriceOrRentValue);
        $("#lblStreet1").html("Endereço: " + item.Address.Street);
        $("#lblStreet2").html(item.Address.Neighborhood + " - " + item.Address.City + ", " + item.Address.State);
        $("#lblNumberOfRooms").html("Núm. de quartos: " + item.NumberOfRooms);
        $("#lblAreaInSquareMeter").html("Área (m2): " + item.AreaInSquareMeter);
        $("#lblRealStateAgencyName").html("Imobiliária: " + item.RealStateAgencyName);

        $.mobile.changePage("#EstateDetail");
        e.preventDefault();
    }

</script>

</asp:Content>
